<template>
    <div class="coupon">
        <div class="title">
            <i class="iconfont icon-wenti-copy"></i>
            <span>使用规则</span>
        </div>
        <div class="coupon_list">
            <div class="item" v-for="coupon in myCoupon" :key="coupon.id">
                <icell>
                    <div slot="left" class="text f20">{{coupon.species}}</div>
                    <div slot="left" class="text">有效期至{{coupon.effective_time|fmtDate}}</div>
                    <div slot="right">
                        ￥<span class="f40">{{coupon.amount}}</span>
                    </div>
                </icell>
                <div class="hint">{{coupon.remark}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import icell from '@/components/common/icell'
    import fmtDate from '@/filters/fmtDate'
    export default {
        name:'balance',
        mixins:[fmtDate],
        data(){
            return{

            }
        },
        components:{icell},
        computed:{
             ...mapGetters(['myCoupon'])
        },
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';
    .coupon{
        width:100%;
        padding:50px 100px;

        .title{
            text-align: right;
            color:$font_color_sub;
            padding-bottom:20px;
        }

        .item{
            position: relative;
            width:100%;
            height:400px;
            background:$white;
            border-radius: 10px;
            border-bottom:15px solid $primary;
            box-shadow: 0 0 1px 0 $border_base;
            margin-bottom:50px;

            .text{
                color:$primary;
            }
            .hint{
                position: absolute;
                bottom:0;
                padding:10px 50px;
                color:$font_color_sub;
            }
        }

    }
</style>

